// 1.less 的注释
// 第一种用户看不到的 双斜杠
// 一般用于公司内部 只给同事看
/* 第二种注释  用户看的见
    可以给用户看到的注释
*/

// 2.less变量
// 第一种变量 用于设定值
// @变量名:变量值;
// 直接定义变量用户看不见
// 使用的时候需要加@符号
// @color:green;
// // 用来设定选择器 和属性的
// // 必须  @{变量名}  使用
// // 一般来说选择器和属性 不使用变量
// 变量的命名规范
// 1.必须以@开头
// 2.不能包含特殊字符
// 3.不能以数字开头
// 4.大小写敏感
// 将所有语言都默认为大小写明杆
// red  Red
// color  Color
// @select:.div1;
// @w:width;
// @s#:red;
// body{
//     background-color: @color;
// }
// @1s:red;
// @{select}{
//     background-color: @color;
//     // @{w}:100px;  正确的写法
//     @w:100px;
//     width: @w;
// }

//3.less 的嵌套
// 注意点  加一个&符号  中间没用空格
// 不加&中间会多一个空格
// 可以让css代码结构看起来更清楚
.header{
    width: 100px;
    height: 100px;
    .div1{
        background-color: red;
        .div3{
            background-color: blue;
        }
        &:hover{
            background-color: brown;
        }
        &::after{
            content: '';
        }
    }
    .div2{
        background-color: green;
    }
}

@w:100px;
// 运算 （calc ）
body{
    // width: 1px+10px;
    // width: 10px-1px;
    // width: 10px*2;
    // 计算可以不同单位  但是以第一个参数的单位为准
    // width: 10mm+1cm;
    // width: @w+100;
    

}